import React, { useState } from 'react'
import { Collapse, Tabs, TabPanel, Table, Card } from 'tea-component'
import img from '../../assets/images/tencentlinux.png'
import './ConfirmConfiguration.less'

export default function FormLayoutExample() {
  /** @type {any} */
  const tabs = [
    { id: 'InboundRule', label: 'Inbound rule' },
    { id: 'OutboundRule', label: 'Outbound rule' }
  ]

  const tableData = [
    { id: 1, Source: '0.0.0.0/0', ProtocolPort: 'ICMP', Policy: 'Allow', Notes: 'Allow ping command' },
    { id: 2, Source: '::/0', ProtocolPort: 'ICMPV6', Policy: 'Allow', Notes: 'Allow ping command' },
    { id: 3, Source: '0.0.0.0/0', ProtocolPort: 'TCP:22', Policy: 'Allow', Notes: 'Allow Linux SSH login' },
    { id: 4, Source: '::/0', ProtocolPort: 'TCP:22', Policy: 'Allow', Notes: 'Allow Linux SSH login' }
  ]

  const tableData2 = [
    { id: 1, Target: '-', ProtocolPort: 'ALL', Policy: 'Allow', Notes: '-' },
    { id: 2, Target: '0.0.0.0/0', ProtocolPort: 'ALL', Policy: 'Refuse', Notes: '-' }
  ]

  return (
    <div className="confirm-configuration">
      <Card>
        <Card.Body>
          <Collapse>
            <Collapse.Panel id="1" className="item-title" title="Region and model">
              <div className="vessel">
                <div>
                  <label className="vessel-label">CVM Billing Method</label>
                  <span>Pay as you go</span>
                </div>
                <div>
                  <label className="vessel-label">Region</label>
                  <span>Guangzhou</span>
                </div>
                <div>
                  <label className="vessel-label">Availability Zone</label>
                  <span>Guangzhou Zone 6</span>
                </div>
                <div>
                  <label className="vessel-label">Network</label>
                  <span>Default-VPC (Default)</span>
                </div>
                <div>
                  <label className="vessel-label">Subnet</label>
                  <span>Default-Subnet (Default)</span>
                </div>
                <div>
                  <label className="vessel-label">Model</label>
                  <span>S6.MEDIUM4 (Standard S6, 2-core 4 GB)</span>
                </div>
              </div>
            </Collapse.Panel>
            <Collapse.Panel id="2" className="item-title" title="Image">
              <div className="vessel">
                <div>
                  <label className="vessel-label">Image</label>
                  <span>Public image</span>
                </div>
                <div>
                  <label className="vessel-label" style={{ float: 'left' }}>
                    Image Information
                  </label>
                  <div className="vessel-chunk">
                    <div className="chunk-icon">
                      <img src={img} />
                    </div>
                    <div className="chunk-text">
                      <h3>TencentOS Server 3.1 (TK4)</h3>
                      <p>Image ID: img-eb30mz89</p>
                      <p>Operating system TencentOS</p>
                      <p>Image size: 50GB</p>
                      <p>Image description: TencentOS Server 3.1 (TK4)</p>
                    </div>
                  </div>
                </div>
              </div>
            </Collapse.Panel>
            <Collapse.Panel id="3" className="item-title" title="Storage and Bandwidth">
              <div className="vessel">
                <div>
                  <label className="vessel-label">System disk</label>
                  <span>50GB，Premium Cloud Storage</span>
                </div>
                <div>
                  <label className="vessel-label">Data disk</label>
                  <span>(Not configured)</span>
                </div>
                <div>
                  <label className="vessel-label">Public IP</label>
                  <span>Purchase</span>
                </div>
                <div>
                  <label className="vessel-label">IPv6</label>
                  <span>Not assigned</span>
                </div>
                <div>
                  <label className="vessel-label">Network billing mode</label>
                  <span>By Traffic：5Mbps</span>
                </div>
              </div>
            </Collapse.Panel>
            <Collapse.Panel id="4" className="item-title" title="Security Groups">
              <div className="vessel">
                <div>
                  <label className="vessel-label">Security Group Name</label>
                  <span>Custom Template</span>
                </div>
                <div>
                  <label className="vessel-label" style={{ float: 'left' }}>
                    Security Group Rules
                  </label>
                  <div className="vessel-chunk">
                    <Tabs tabs={tabs}>
                      <TabPanel id="InboundRule">
                        <Table
                          records={tableData}
                          recordKey="id"
                          columns={[
                            {
                              key: 'Source',
                              header: 'Source'
                            },
                            {
                              key: 'ProtocolPort',
                              header: 'Protocol port'
                            },
                            {
                              key: 'Policy',
                              header: 'Policy'
                            },
                            {
                              key: 'Notes',
                              header: 'Notes'
                            }
                          ]}
                        />
                      </TabPanel>
                      <TabPanel id="OutboundRule">
                        <Table
                          records={tableData2}
                          recordKey="id"
                          columns={[
                            {
                              key: 'Target',
                              header: 'Target'
                            },
                            {
                              key: 'ProtocolPort',
                              header: 'Protocol port'
                            },
                            {
                              key: 'Policy',
                              header: 'Policy'
                            },
                            {
                              key: 'Notes',
                              header: 'Notes'
                            }
                          ]}
                        />
                      </TabPanel>
                    </Tabs>
                  </div>
                </div>
              </div>
            </Collapse.Panel>
            <Collapse.Panel id="5" className="item-title" title="Set Information">
              <div className="vessel">
                <div>
                  <label className="vessel-label">Project</label>
                  <span>Default project</span>
                </div>
                <div>
                  <label className="vessel-label">Tag</label>
                  <span>(Not configured)</span>
                </div>
                <div>
                  <label className="vessel-label">Instance Name</label>
                  <span>(Unnamed)</span>
                </div>
                <div>
                  <label className="vessel-label">Login Methods</label>
                  <span>Associated key (skey-86coyg0n | wstestkeypair)</span>
                </div>
                <div>
                  <label className="vessel-label">Security Reinforcement</label>
                  <span>Enable for Free</span>
                </div>
                <div>
                  <label className="vessel-label">Cloud Monitoring</label>
                  <span>Enable for Free</span>
                </div>
              </div>
            </Collapse.Panel>
            <Collapse.Panel id="6" className="item-title" title="Advanced Settings">
              <div className="vessel">
                <div>
                  <label className="vessel-label">Hostname</label>
                  <span>(Not configured)</span>
                </div>
                <div>
                  <label className="vessel-label">CAM Role</label>
                  <span>(Not configured)</span>
                </div>
                <div>
                  <label className="vessel-label">Placement Group</label>
                  <span>(Not configured)</span>
                </div>
                <div>
                  <label className="vessel-label">Custom data</label>
                  <span>(Not configured)</span>
                </div>
              </div>
            </Collapse.Panel>
          </Collapse>
        </Card.Body>
      </Card>
    </div>
  )
}
